<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购物车页面</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="fonts/glyphicons-halflings-regular.woff2">
</head>
<body>
<div id="top"></div>
<div class="container" style="background-color: white;">

    <div class="row" style="margin-top: 40px;">
        <h3 style="margin-left: 10%"><span class="glyphicon glyphicon-shopping-cart" style="color: #a10e0b"></span>我的购物车</h3>
        <div id="tips"></div>
        <div class="col-md-10 col-md-offset-1">

            <table class="table table-bordered table-striped table-hover">
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>

                <tbody id="cartTable" style="table-layout: fixed;border-collapse: collapse"></tbody>

            </table>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="pull-right" style="margin-right: 40px;">

            <div>
                <button id="removeAllProduct" class="btn btn-default btn-lg">清空购物车</button>
                &nbsp;&nbsp;
                <button id="settle" class="btn  btn-danger btn-lg">结算</button>

            </div>
            <br><br>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#top").load("top.html")
        let settle = $("#settle")

        const headers = {};
        if (localStorage.token) {
            headers['Authorization'] = `${localStorage.token}`;
        }
        //发送ajax请求购物车数据
        $.ajax({
            url: "/PDD/cart?method=showCart",
            dataType: "json",
            headers:headers,
            success: function (data) {
                if(data.code===401){
                    window.location.href="login.html"
                }
                let cartList = data.data
                if (cartList == null) {
                    //购物车没数据 提示
                    $("#tips").append("<h3>购物车空空如也！快去购物吧！</h3>")
                } else {
                    //结算按钮生效
                    settle.click(function (){
                        window.location.href="order.html"
                    })
                    //拼接html
                    let html = '';
                    for (let i = 1; i <= cartList.length; i++) {
                        let cart = cartList[i - 1];
                        alert(cart)
                        console.log(cart)
                        html += `<tr>
               <th>${i}</th>
               <th>${cart.pName}</th>
               <th>${cart.price.toFixed(2)}</th>
               <th width="100px">
                   <div class="input-group">
                       <span class="input-group-btn">
                           <button id="substract${i}" class="btn btn-default" type="button">-</button>
                       </span>
                       <input type="text" class="form-control" id="num_count${i}" value="${cart.num}" readonly="readonly" style="width:40px">
                       <span class="input-group-btn">
                           <button id="add${i}" class="btn btn-default" type="button">+</button>
                       </span>
                   </div>
               </th>
               <th>¥&nbsp;${cart.count.toFixed(2)}</th>
               <th>
                   <button type="button" id="delete${i}">删除</button>
               </th>
           </tr>`;
                    }
                    // 将购物车信息拼接到页面中
                    $("#cartTable").append(html);
                }

                for (let i = 1; i <= cartList.length; i++) {
                    //删除点击事件
                    $("#delete"+i).click(function (){
                        $.ajax({
                            url:"/PDD/cart?method=deleteCartByPid&pId="+cartList[i-1].pId,
                            dataType: "json",
                            success:function (data){
                                if(data.code===401){
                                    window.location.href="login.html"
                                }else{
                                    location.reload();
                                }
                            }
                        })
                    })
                    //数目增加点击事件
                    $("#add"+i).click(function (){
                        $.ajax({
                            url:"/PDD/cart?method=updateCartNum&pId="+cartList[i-1].pId+"&increment=1",
                            dataType:"json",
                            success:function (data){
                                if(data.code===401) {
                                    window.location.href = "login.html"
                                }else{
                                    location.reload();
                                }
                            }
                        })
                    })
                    //数目减少点击事件
                    $("#substract"+i).click(function (){
                        let num=parseInt($("#num_count"+i).val())
                        if(num>1) {
                            $.ajax({
                                url: "/PDD/cart?method=updateCartNum&pId=" + cartList[i - 1].pId + "&increment=-1",
                                dataType: "json",
                                success:function (data){
                                    if(data.code===401) {
                                        window.location.href = "login.html"
                                    }else{
                                        location.reload();
                                    }
                                }
                            })
                        }
                    })
                }
            },
            error: function (data) {
                window.location.href="login.html"
            }
        })

        //清空购物车点击事件
        $("#removeAllProduct").click(function (){
            $.ajax({
                url:"/PDD/cart?method=removeAllCart",
                dataType:"json",
                success:function (data){
                    if(data.code===401) {
                        window.location.href = "login.html"
                    }else{
                        location.reload();
                    }
                }
            })
        })

        // //向后端发送ajax请求 添加购物车数据
        // const searchParams = new URLSearchParams(location.search);
        // // 获取商品id
        // const pId = searchParams.get("pId");
        // $.ajax({
        //     url:"/PDD/cart?method=addCart&pId="+pId,
        //     dataType:"json",
        //     success:function (result){
        //         alert(result.data)
        //         if(result.code===401){
        //             window.location.href="login.html"
        //         }
        //     },
        //     error: function(jqXHR, textStatus, errorThrown) {
        //         alert(textStatus + ": " + errorThrown);
        //     }
        // })
    })
</script>
</body>
</html>